<template>
  <div class="allcomment"  id="allcomment" v-show="discussShow">
    <magic-header titleName="详情"></magic-header>
    <!-- <ma-scroll :up="false" :down="true" :getMore="getComment"  :showMsg="false" :init="initData"> -->
      <!-- 动态详情 -->
      <!-- <dynamic v-if="itemData" :itemData="itemData" :showBottom="false" :showDetail="false"></dynamic> -->
      <dynamic-info :value="itemData">
        <dynamic-author :id="refId" :followShow="true" v-on:removeSuccess="removeSuccess" :value="itemData.author" slot="author"></dynamic-author>
      </dynamic-info>
      <!-- 评价 0-评论 1-点赞 -->
      <tabs :tabData="tabData">
        
        <comment slot="tab0" v-on:delSpaceComment="delSpaceComment" :isGoInfo="true" :spaceId="refId" :value="commentData"/>
        
        <div slot="tab1" class="likeBox">
          <div class="top" v-for="(item,index) in supportData" :key="index">
            <div class="leftbox">
              <img :src="item.member.head?addPath(item.member.head):''" @error="setError" />
            </div>
            <div class="right">
              {{item.member.nickname}}
            </div>
          </div>
        </div>
      </tabs>
    <!-- </ma-scroll> -->
    <footer class="footer">
      <div class="comment" @click="goComment">评论</div>
      <div class="like" @click="like">喜欢</div>
    </footer>
    
  </div>
</template>
<script>
// components
import dynamicInfo from "components/dynamic/dynamic_info";
import dynamicAuthor from "components/dynamic/dynamic_author";
import magicHeader from "components/magicHeader";
import tabs from "components/tab/tabs";
// image
import vfacDefault from "assets/default_user_icon.png";
//vfhz image
import imageServices from "services/getImage/getImage"
import down from "assets/down-gray.svg";
// service
import ListSpaceComment from "services/community/ListSpaceComment";
import ListSpaceSupport from "services/community/ListSpaceSupport";

import DeleteSpaceCommentService from "services/community/DeleteSpaceComment";
import CreateSpaceSupport from "services/community/CreateSpaceSupport";
import QueryPost from "services/community/QueryPost";

import comment from 'components/comment'

export default {
  name: "allcomment",
  components: { 
    magicHeader,
    dynamicAuthor,
    tabs,
    dynamicInfo,
    comment
  },
  data() {
    return {
      id:'',
      refId:'',
      itemData: "",
      // 设置tab切换
      tabData: [
        {
          title: "评论",
          redMsg: false
        },
        {
          title: "喜欢",
          redMsg: false
        }
      ],
      commentData: [],
      supportData: [],
      removeData: {},
      // 渲染控制
      discussShow: false,
      bottomSheet: false,
      // img
      defaultAvatar: '',
      down,
      commentIndex:0,
      commentCount:8,
      supportIndex:0,
      supportCount:10,
      initData:false
    };
  },
  created(){
    if(this.$.appname === 'cn.carowl.vfuhuizhong'){
      imageServices.bind(this)({},res=>{
        this.defaultAvatar = res.data.newLogo
      })
    }else{
      this.defaultAvatar = vfacDefault
    }
    if (this.$route.query.refId) {
      this.id = this.$route.query.id || ''
      this.refId = this.$route.query.refId
      this.init()
    }
  },
  methods: {
    getComment(callback) {
      let vm = this;
         return new Promise(function(resolve, reject) {
        ListSpaceComment.bind(vm)(
          {
            spaceId: vm.refId,
            type:"space",
          },
          res => {
            vm.commentData.push(...res)
            vm.commentIndex += vm.commentCount
            vm.initData = true
            resolve(callback);
          }
        );
      });
    },
    //删除评论回调
    delSpaceComment(){
      this.tabData[0].title = "评论" + (this.itemData.commentCount-1 || '0');
    },
    goComment(){
      if(this.$.userId){
        this.$router.push({
          name:'new_comment',
          params:{
            id:this.refId
          }
        })
      }else{
        this.$.goLogin({
            name: "login"
          });
      }
     
    },
    setError(event) {
      let e = event || window.event;
      let target = e.target || e.srcElement;
      target.src = this.defaultAvatar;
    },
    // Init 初始化操作
    init(index) {
      // 避免页面渲染展示旧数据
      this.discussShow = false;

      // 动态详情
      this.getDynamicData();
      
      // 评论
      this.commentData = [];
      this.getCommentData(index)
      this.discussShow = true;
      // 喜欢
      this.supportData = [];
      this.getSupportData(index)

      // this.initData = true
    },
    // [动态]数据处理
    getDynamicData() {
      QueryPost.bind(this)({
        postId:this.id
      },res=>{
        this.itemData = res
        this.tabData[0].title = "评论" + res.commentCount || '0';
        this.tabData[1].title = "喜欢" + res.supportCount || '0';
      })
    },
    // [评论]数据处理
    getCommentData(index) {
      if(index === 0){
        this.commentIndex = index
      }
      ListSpaceComment.bind(this)({
        spaceId: this.refId,
          type:"space"
      },res=>{
        this.commentData.push(...res)
        this.commentIndex += this.commentCount
        this.initData = true
      })
    },
    // [喜欢]数据处理
    getSupportData(index) {
      if(index === 0){
        this.supportIndex = index
      }
      ListSpaceSupport.bind(this)({
        spaceId:this.refId,
        index:this.supportIndex,
        count:this.supportCount
      },res=>{
        this.supportData = res
      })
      // let supportData = [];
      // if(spaceData.supports !== undefined){
      //   spaceData.supports.forEach((item, index) => {
      //     supportData.push({
      //       avatar: item.member.head
      //         ? this.addPath(item.member.head)
      //         : this.defaultAvatar,
      //       nickname: item.member.nickname
      //     });
      //   });
      // }
      // return supportData;
    },
    removeSuccess(){
      this.$router.go(-1)
    },
    like(){
      if(this.$.userId){
        CreateSpaceSupport.bind(this)({
          spaceId:this.refId
        },res=>{
          this.init(0)
        })
      }else{
        this.$.goLogin({
            name: "login"
          });
      }
      
    }
  }
};
</script>

<style lang="scss">
#allcomment{


#wrapper{
  bottom: 45px;
}
.scroller{
  width: 100%;
}
.allcomment{
  padding-bottom: 40px;
}
.item-container {
  border-bottom: 1px solid #ececec;
}
.top,
.bottom {
  display: -webkit-box;
  align-items: center;
  padding: 4px;
}
.leftbox {
  flex: 1 1 0;
}
.leftbox img {
  width: 30px;
  height: 30px;
}
.right {
  flex: 6 1 0;
}
.righter {
  flex: 0 1 0;
  padding-bottom: 17px;
  padding-right: 10px;
}
.text {
  padding: 0.4em 0;
}
.grey-text {
  color: #666;
}
.tabs{
  // padding-bottom: 50px;
}
.tab-container{
  padding-bottom: 50px;
}
.bottom-btn {
  text-align: center;
  &.cancel-btn {
    color: #9e9e9e;
  }
}
.padding-btn {
  padding: 5px;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  height: 1px;
}
.footer{
  background-color: #fff;
  position:fixed;
  bottom: 0;
  width: 100%;
  display:flex;
  height: 40px;
  border-top: 1px solid #999;
}
.footer>div{
  width: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  position: relative;
}
.footer .comment::after{
  content: " ";
  position: absolute;
  width: 1px;
  right: 0;
  top: 16px;
  height: 10px;
  background-color: #999;
}
.likeBox{
  padding-bottom: 50px;
}
}
</style>